<template>
	<NavBar title="立即领用" />
	<scroll-view scroll-y="true"  class="list" >
		<view class="select">
			<view class="">
				领用单位
			</view>
			<view class=""  @click="select">
				<uv-text v-show="!contractName" suffixIcon="arrow-right" iconStyle="font-size: 14px" text="请选择"></uv-text>
				<view class="">
					{{contractName}}
				</view>
			</view>
		</view>
		<view class="accessory">
			<view class="title">
				附件
			</view>
			<view class="hint">
				最多上传5个文件，最大5MB/个
			</view>
			<view class="img_list" v-show="imgFile.length!==0">
				<view class="img_item"  v-for="(item,index) in imgFile" :key="index">
					<image  class="imgfile" :src="item" mode="scaleToFill"></image>
					<uv-icon name="trash-fill" size="28" @click="deletePic(index)"></uv-icon>
				</view>
			</view>
			<view class="uploading" v-show="imgFile.length<5" @click="chooseImage">
				<!-- 上传附件 -->
				<image class="icon" src="/static/tabbar/Frame@2x(2).png" mode="widthFix"></image>
				<text>上传附件</text>
				<!-- <uv-text prefixIcon="https://ts.cciictop.com/profile/upload/2025/07/31/3d853ca7-e93d-42a8-8231-91ae5ea35dda.png" iconStyle="font-size: 19px" text="上传附件"></uv-text> -->
			</view>
		</view>
	</scroll-view>
	<view v-if="isShow" class="picker-container">
	  <view class="picker-mask" @click="closeOutPicker()"></view>
	  <view class="picker-content">
	    <view class="picker-header">
	      <text class="picker-cancel" @click="closeOutPicker()">取消</text>
	      <text class="picker-title">选择使用单位</text>
	      <text class="picker-confirm" @click="confirmOut()">确定</text>
	    </view>
	    <scroll-view scroll-y class="picker-list">
	      <view  class="picker-item" v-for="(item, index) in unitList" v-show="item.parentId!==0" :key="index" 
	            :class="{ 'selected': unit === item.id }"
	            @click="selectOutOption(item)">
	        <text>{{ item.contractName }}</text>
	      </view>
		  <view class="black-box">
		  	
		  </view>
	    </scroll-view>
		
	  </view>
	</view>
	<view class="submit">
		<uv-button :custom-style="customStyle" type="primary" text="提交" @click="confirm"></uv-button>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar/index.vue'
	import { BASEURL } from '@/utils/request.js'
	import {
		queryByParam,
		facilitydraw
	} from '@/utils/app.js'
	export default {
		components: { NavBar },
		data() {
			return {
				parms:{
					facilityId:'',
					projectId:'',
					contractId:''
				},
				unitList:[],
				isShow:false,
				unit:'',
				contractName:'',
				tempFile:[],
				maxNum:5,
				imgFile:[],
				imgList:[],
			};
		},
		watch:{
			'imgFile.length':function(newLength, oldLength){
				console.log(newLength, oldLength);
				this.maxNum =5- newLength
			}
			
		},
		computed: {
			customStyle() {
				return {
					height: '80rpx',
					width:'700rpx',
					background: '#3c9cff',
					color: '#fff',
				}
			}
		},
		onLoad(option) {
			console.log(option);
			this.parms.facilityId = option.facilityId
			this.queryByParamList({projectId:option.projectId})
		},
		methods:{
			queryByParamList(data){
				queryByParam(data).then(res=>{
					this.unitList=res.data
					// this.isShow = true
					console.log(res);
				})
			},
			select(){
				this.isShow = true
			},
			selectOutOption(data) {
				console.log(data);
				this.unit = data.id
				this.contractName = data.contractName
					
				// this.parms = {
				// 	projectId:data.projectId,
				// 	contractId:data.id
				// }
				this.parms.projectId=data.projectId,
				this.parms.contractId = data.id
				// this.parms=obj
			},
			closeOutPicker(e) {
			  this.isShow = false;
			},
			confirmOut(){
				this.isShow = false;
			},
			chooseImage(i) {
				if(this.actionIndex==1){
					this.imgFile = [...this.imgListTwo[i.id]]
				}
			    const that = this
			    uni.chooseImage({
			        count: this.maxNum, //默认9
			        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			        success: async (res) => {
						console.log(res);
			            that.tempFile = [...res.tempFilePaths]
			            const token = uni.getStorageSync("token");
			            that.tempFile.forEach(item => {
			                // #ifdef APP-PLUS
			                if (item.split(':')[0] != 'file') {
			                    let p = plus.io.convertLocalFileSystemURL(item);
			                    that.imgFile.push('file://' + p)
			                    uni.uploadFile({
			                        url: `${BASEURL}/common/upload`,
			                        filePath: 'file://' + p,
			                        header: {
			                            'Authorization': token,
			                        },
			                        name: 'file',
			                        success: (uploadFileRes) => {
										if(this.actionIndex==1){
											this.imgListTwo[i.id] = [...this.imgListTwo[i.id],JSON.parse(uploadFileRes.data).annexUrl]
											// this.imgListTwo.push(JSON.parse(uploadFileRes.data).annexUrl)
										}else{
											this.imgList.push(JSON.parse(uploadFileRes.data).annexUrl)
										}
			                            // this.imgList.push(JSON.parse(uploadFileRes.data).annexUrl)
			                            // 获取上传服务器的地址 
			                        }
			                    });
			                } else {
			                    that.imgFile.push(item)
			                    uni.uploadFile({
			                        url: `${BASEURL}/common/upload`,
			                        filePath: item,
			                        header: {
			                            'Authorization': token,
			                        },
			                        name: 'file',
			                        success: (uploadFileRes) => {
			                            // this.imgList.push(JSON.parse(uploadFileRes.data).annexUrl)
			                            // 获取上传服务器的地址
										if(this.actionIndex==1){
											// this.materialList.forEach(item => {
											
											    this.imgListTwo[i.id] = [...this.imgListTwo[i.id],JSON.parse(uploadFileRes.data).annexUrl]
											// });
										}else{
											this.imgList.push(JSON.parse(uploadFileRes.data).annexUrl)
										}
			                        }
			                    });
			                }
			                // #endif
			
			                // #ifdef H5
			                that.imgFile.push(item)
			
			                uni.uploadFile({
			                    url: `${BASEURL}/common/upload`,
			                    filePath: item,
			                    header: {
			                        'Authorization': token,
			                    },
			                    name: 'file',
			                    success: (uploadFileRes) => {
			                        // this.imgList.push(JSON.parse(uploadFileRes.data).annexUrl)
									if(this.actionIndex==1){
										// this.materialList.forEach(item => {
											// if(Object.keys(this.imgListTwo).includes(i.id)){
												// if(!this.myObject[i.id]){
													// this.$set(this.imgListTwo, i.id, []);
												// }
												
											// }
										     this.imgListTwo[i.id] = [...this.imgListTwo[i.id],JSON.parse(uploadFileRes.data).annexUrl]
										// });
									}else{
										this.imgList.push(JSON.parse(uploadFileRes.data).annexUrl)
									}
			                        // 获取上传服务器的地址
			                    }
			                });
			                // #endif
			
			            })
			
			        }
			    });
			},
			deletePic(index) {
				// console.log(event.name,this.fileList,this[`fileList${event.name}`]);
			    this.imgFile.splice(index, 1)
				this.imgList.splice(index, 1)
			},
			confirm(){
				if(!this.contractName){
					uni.showToast({
					  title: '请选择领用单位',
					  icon: 'none'
					});
					return
				}
				const img = this.imgList.length?this.imgList.join(','):''
				facilitydraw({...this.parms,attachmentUrl:img,type:1}).then(res=>{
					if(res.code==200){
						uni.showToast({
						  title: '成功',
						  icon: 'none'
						});
						uni.switchTab({
							url:'/pages/facility/index'
						})
						
					}
					 
				})
				
			},
		}
	}
</script>

<style lang="scss">
	::v-deep.uv-button-wrapper{
		margin:  0 auto; 
	}
.list{
	height: calc(100vh - 180rpx);
	background-color: #f6f7f9;
	.select{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 15rpx;
		height: 100rpx;
		padding: 0 32rpx;
		background-color: #fff;
	}
	.accessory{
		padding: 32rpx 32rpx 0;
		background-color: #fff;
		.hint{
			margin-top: 10rpx;
			font-size: 28rpx;
			color: #a9a9a9;
		}
	}
	.img_item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 120rpx;
		padding: 15rpx;
		border:1rpx solid #d3d3d3;
		border-radius: 10rpx;
		margin-bottom: 15rpx;
		.imgfile{
			width: 120rpx;
			height: 120rpx;
		}
	}
	.uploading{
		// text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 30rpx;
		padding-bottom: 40rpx;
		color: #4980FF;
		.icon{
			width: 32rpx;
			margin-right: 10rpx;
		}
	}
}
.submit{
	width: 100vw;
	position: fixed;
	bottom: 0;
	padding-top: 10rpx;
	padding-bottom: 40rpx;
	border-top:1rpx solid #d3d3d3;
	
}
/* 修改底部弹出层部分 */
		.picker-container {
		  position: fixed;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  top: 0;
		  z-index: 11000;
		}
		
		.picker-mask {
		  position: absolute;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  background-color: rgba(0, 0, 0, 0.4);
		}
		
		.picker-content {
		  position: absolute;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  height: 500rpx;
		  background-color: #FFFFFF;
		  border-top-left-radius: 16px;
		  border-top-right-radius: 16px;
		}
		
		.picker-header {
		  display: flex;
		  height: 53px;
		  flex-direction: row;
		  justify-content: space-between;
		  align-items: center;
		  padding: 0 16px;
		  border-bottom-width: 1px;
		  border-bottom-color: #EEF2F9;
		  margin-bottom: 30rpx;
		}
		
		.picker-title {
		  font-size: 16px;
		  color: #1D2129;
		  font-weight: 400;
		}
		
		.picker-cancel, .picker-confirm {
		  font-size: 16px;
		}
		
		.picker-cancel {
		  color: #86909C;
		}
		
		.picker-confirm {
		  color: #165DFF;
		}
		
		.picker-list {
		  padding: 24rpx 0;
		  max-height: 350rpx;
		  /* overflow: scroll; */
		}
		
		.picker-item {
			display: flex;
		  height: 44px;
		  flex-direction: row;
		  justify-content: center;
		  align-items: center;
		  padding: 0 16px;
		  overflow: hidden;
		  white-space: nowrap;
		  text-overflow: ellipsis;
		}
		.selected{
			background-color: #E8F3FF;
		}
		.black-box{
			height: 50rpx;
		}
		.picker-item text {
		  font-size: 16px;
		  color: #1D2129;
		}
</style>
